<template>
  <div style="height: 100%;padding-bottom: 50px;">
    <div class="w-form-header border-none">
      <StackedBar
        ref="StackedBarOneRef"
        id="StackedBarOne"
      />
    </div>
    <div class="w-form-header border-none">
      <StackedBar
        ref="StackedBarTwoRef"
        id="StackedBarTwo"
      />
    </div>
    <div class="w-form-header border-none">
      <Table
        ref="TableThreeRef"
      />
    </div>
    <div class="w-form-header border-none">
      <Pie
        ref="PieFourRef"
        id="PieFour"
      />
    </div>
  </div>
  <NavBar :active="1"></NavBar>
</template>

<script setup>
import {
  findSysDataStatistic,
} from "@/api/statistic";
// 全量引入格式化工具 请按需保留
import StackedBar from "./component/StackedBar.vue";
import Pie from "./component/Pie.vue";
import Table from "./component/Table.vue";
import { useI18n } from "vue-i18n";
import NavBar from "@/components/NavBar/NavBar.vue";
const { t: il8n } = useI18n();
defineOptions({
  name: "DataCenter",
});

// 自动获取字典
import { useRoute, useRouter } from "vue-router";
import { ref, reactive, onMounted, watchEffect } from "vue";
const router = useRouter();
const route = useRoute();

const StackedBarOneRef = ref();
const StackedBarTwoRef = ref();
const TableThreeRef = ref();
const PieFourRef = ref();


watchEffect(() => {
 
  
});
const dict = ref({});
onMounted(async () => {
  findSysDataStatisticData(1);
  findSysDataStatisticData(2);
  findSysDataStatisticData(3);
  findSysDataStatisticData(4);
});

async function findSysDataStatisticData(ID) {
  const res = await findSysDataStatistic({ ID });
  if (res.code === 0) {
    const {
      data: {
        resysDataStatistic,
      },
    } = res;
    if (ID == 1) {
      try {
        const { data: { series }, statSetting: { legend, title, xAxis } } = resysDataStatistic;
        const rawData = [];
        for (let i = 0; i < series.length; i++) {
          rawData.push(series[i].data);
        }
        StackedBarOneRef.value.updateValue({
          rawData,
          seriesData: legend.data, 
          xAxisData: xAxis.data, 
          title: title.text
        })
      } catch (error) {
        
      } 
    }

    if (ID == 2) {
      try {
        const { data: { series }, statSetting: { legend, title, xAxis } } = resysDataStatistic;
        const rawData = [];
        for (let i = 0; i < series.length; i++) {
          rawData.push(series[i].data);
        }
        StackedBarTwoRef.value.updateValue({
          rawData,
          seriesData: legend.data, 
          xAxisData: xAxis.data, 
          title: title.text
        })
      } catch (error) {
        
      }
      
    }
    if (ID == 3) {
      try {
        const { data, statName } = resysDataStatistic;
        TableThreeRef.value.updateValue({
          rawData: data,
          title: statName
        })
      } catch (error) {
        
      }
    }
    if (ID == 4) {
      try {
        const { data: { data }, statSetting: { title } } = resysDataStatistic;
        PieFourRef.value.updateValue({
          rawData: data,
          title: title.text
        })
      } catch (error) {
        
      }
    }
    
  }
}

</script>

<style lang="scss" scoped>
@import url("@/style/common/common.scss");
.gva-form-box {
  :deep(.my-label) {
    width: 9%;
  }
  :deep(.my-content) {
    width: 16%;
  }
}

.title-box {
  display: flex;
  align-items: center;

  .title {
    font-size: 13px;
    color: rgba(173, 173, 173, 1);
  }
}

.border-none {
  border: none;
}

</style>
